// cover some element-ui styles

.el-breadcrumb__inner,
.el-breadcrumb__inner a {
  font-weight: 400 !important;
}

.el-upload {
  input[type="file"] {
    display: none !important;
  }
}

.el-upload__input {
  display: none;
}


// tdialog
// to fixed https://github.com/ElemeFE/element/issues/2461
.el-dialog {
  transform: none;
  left: 0;
  position: relative;
  margin: 0 auto;
  .el-dialog__header{
    border-bottom: 1px solid #eee;
    .el-dialog__title{
      font-size: 16px;
      font-weight: bold;
    }
  }
  .el-dialog__footer{
    padding: 15px 20px;
    border-top: 1px solid #eee;
  }
}

// refine element ui upload
.upload-container {
  .el-upload {
    width: 100%;

    .el-upload-dragger {
      width: 100%;
      height: 200px;
    }
  }
}

// dropdown
.el-dropdown-menu {
  a {
    display: block
  }
}

// to fix el-date-picker css style
.el-range-separator {
  box-sizing: content-box;
}

// menu
.el-menu-item{
  height: 48px;
  line-height: 48px;
  &.is-active{
    background-color: $themeColor!important;
    color: $menuBg!important;
  }
}
.el-submenu__title{
  height: 48px;
  line-height: 48px;
}
.el-submenu .el-menu-item{
  height: 48px;
  line-height: 48px;
}
.nest-menu .el-submenu > .el-submenu__title:hover, .el-submenu .el-menu-item:hover{
  color: $menuBg!important;
}
.submenu-title-noDropdown:hover, .el-submenu__title:hover{
  color: $menuBg!important;
}
.el-submenu .el-menu{
  background-color: $subMenuBg !important;
}
#app .sidebar-container .is-active > .el-submenu__title{
  color: $themeColor!important;
}
#app .sidebar-container .nest-menu .el-menu-item.is-active{
  background-color: $themeColor!important;
}

// form
.el-form{
	.el-input, .el-select, .el-date-editor, .el-autocomplete{
		width: 100%;
	}
	&[position="top"].three-column, &[position="top"].two-column{
		.el-form-item__content{
            padding-right: 45px;
            >div:not(.el-input-group){
                display: inline-block;
            }
            .tree-s{
                top: 11px;
                margin-top: -18px;
            }
		}
	}
	&.four-column, &.three-column, &.two-column{
		&:after{
			content: "";
			display: block;
			clear: both;
			visibility: hidden;
			height: 0;
		}
		.el-form-item{
			float: left;
			margin-right: 0;
			.el-form-item__label{
                padding: 0 8px;
			}
			.el-form-item__content{
                >div{
                    width: 100%;
				}
			}
			&.is-success .el-input__inner{
                border-color: #dcdfe6;
			}
		}
    }
    &.four-column .el-form-item{
        width: 25%;
        @media screen and (max-width: 1600px) {
            width: 33.3333%;
        }
	}
    &.three-column .el-form-item{
        width: 33.3333%;
	}
	&.two-column .el-form-item{
		width: 50%;
	}
	.el-upload-list{
		display: inline-block;
		.el-upload-list__item-name{
			overflow: auto;
			white-space: inherit;
		}
    }
    .el-form-item{
        margin-bottom: 25px;
    }
	.el-form-item.is-success .el-input__inner, .el-form-item.is-success .el-input__inner:focus, .el-form-item.is-success .el-textarea__inner, .el-form-item.is-success .el-textarea__inner:focus{
		border-color: #dcdfe6;
	}
	&.el-form--label-top .el-form-item__label{
		padding: 0;
		margin-bottom: -3px;
	}
	.is-error{
		.vue-treeselect__control{
			border-color:$themeColor!important;
		}
    }
  .btn-after-fields{
    display: inline-block;
    margin-left: 20px;
    margin-bottom: 25px;
    .el-button.el-button--small{
        padding: 8px 17px;
        height: 32px;
    }
  }
}

.el-input.is-disabled .el-input__inner, .el-textarea.is-disabled .el-textarea__inner, .el-radio__input.is-disabled + span.el-radio__label, .el-checkbox__input.is-disabled + span.el-checkbox__label{
    color: #747474;
}
 .el-radio__input.is-disabled.is-checked .el-radio__inner::after{
    background-color: #747474;
}
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after{
    border-color:  #747474;
}

